<template>
  <!--轮播图-->
  <div class="main-container">
    <el-card class="box-card !border-none" shadow="never">
      <div class="flex justify-between items-center">
        <span class="text-page-title">{{ pageName }}</span>
        <el-button type="primary" @click="addEvent()">{{ t("addBartender") }}</el-button>
      </div>
      <el-form
        :inline="true"
        :model="bartenderData.searchParam"
        ref="searchFormRef"
        class="mt-[20px]"
      >
        <el-form-item :label="t('name')" prop="name">
          <el-input
            v-model="bartenderData.searchParam.name"
            :placeholder="t('namePlaceholder')"
            clearable
          />
        </el-form-item>
        <el-form-item :label="t('status')" prop="status">
          <el-select
            v-model="bartenderData.searchParam.status"
            :placeholder="t('statusPlaceholder')"
            clearable
          >
            <el-option :label="t('statusUnlock')" :value="1" />
            <el-option :label="t('lock')" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadBartenderList()">
            {{ t("search") }}
          </el-button>
          <el-button @click="resetForm(searchFormRef)">{{ t("reset") }}</el-button>
        </el-form-item>
      </el-form>
      <div style="margin-top: 20px">
        <el-table
          v-loading="bartenderData.loading"
          :data="bartenderData.data"
          size="large"
        >
          <template #empty>
            <span>{{ !bartenderData.loading ? t("emptyData") : "" }}</span>
          </template>
          <el-table-column prop="avatar" :label="t('avatar')" width="120" align="center">
            <template #default="{ row }">
              <el-image
                v-if="row.avatar"
                class="w-[70px] h-[70px]"
                :src="img(row.avatar)"
                fit="contain"
              >
                <template #error>
                  <div class="image-slot">
                    <img
                      class="w-[70px] h-[70px]"
                      src="@/addon/shop_fenxiao/assets/goods_default.png"
                      fit="contain"
                    />
                  </div>
                </template>
              </el-image>
              <img
                v-else
                class="w-[70px] h-[70px]"
                src="@/addon/shop_fenxiao/assets/goods_default.png"
                fit="contain"
              />
            </template>
          </el-table-column>
          <el-table-column prop="name" :label="t('name')" align="center" />
          <el-table-column prop="work_year" :label="t('work_year')" align="center" />
          <el-table-column
            prop="body"
            :label="t('body')"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column :label="t('status')" align="center">
            <template #default="{ row }">
              <el-tag :type="row.status == 1 ? 'success' : 'danger'">
                {{ t(row.status == 1 ? "statusUnlock" : "lock") }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="t('talent')" align="center">
            <template #default="{ row }">
              <el-tag v-for="(tag, index) in row.talent" :key="index">
                {{ tag }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sort" :label="t('sort')" align="center" />
          <el-table-column :label="t('createTime')" align="center">
            <template #default="{ row }">
              {{ row.create_time || "" }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('operation')"
            align="center"
            fixed="right"
            width="130"
          >
            <template #default="{ row }">
              <el-button type="primary" link @click="editEvent(row)">
                {{ t("edit") }}
              </el-button>
              <el-button type="primary" link @click="delEvent(row)">
                {{ t("delete") }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="mt-[16px] flex justify-end">
          <el-pagination
            v-model:current-page="bartenderData.searchParam.page"
            v-model:page-size="bartenderData.searchParam.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="bartenderData.total"
            @size-change="loadBartenderList()"
            @current-change="loadBartenderList"
          />
        </div>
        <edit-bartender ref="editBartenderDialog" @complete="loadBartenderList()" />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { t } from "@/lang";
import { img } from "@/utils/common";
import type { FormInstance } from "element-plus";
import { ElMessageBox, ElMessage } from "element-plus";
import { getBartenderList, deleteBartenderApi } from "@/app/api/alcohol";
import editBartender from "@/app/views/alcohol/components/edit-bartender.vue";
import { useRoute } from "vue-router";

const route = useRoute();
const pageName = route.meta.title;
const bartenderData = reactive({
  loading: true,
  searchParam: {
    page: 1,
    limit: 10,
    name: null,
    status: null,
  },
  data: [],
  total: 0,
});
const editBartenderDialog: Record<string, any> | null = ref(null);
const searchFormRef: Record<string, any> | null = ref(null);

onMounted(() => {
  loadBartenderList();
});

// 表单重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  loadBartenderList();
};

/**
 * 获取专家列表
 */
const loadBartenderList = (page: number = 1) => {
  bartenderData.loading = true;
  bartenderData.searchParam.page = page;
  getBartenderList(bartenderData.searchParam)
    .then((res) => {
      let list = res.data.data;
      list.forEach((i: any) => {
        i.talent = i.talent?.split(",").filter(Boolean) || [];
      });
      bartenderData.data = list;
      bartenderData.total = res.data.total;
    })
    .finally(() => {
      bartenderData.loading = false;
    });
};

/**
 * 编辑专家
 * @param data
 */
const editEvent = (data: any) => {
  editBartenderDialog.value.setFormData(data);
  editBartenderDialog.value.showDialog = true;
};

/**
 * 添加专家
 */
const addEvent = () => {
  editBartenderDialog.value.setFormData();
  editBartenderDialog.value.showDialog = true;
};

/**
 * 删除专家
 * @param data
 */
const delEvent = (data: any) => {
  ElMessageBox.confirm(t("confirmDelete"), t("deleteTips"), {
    confirmButtonText: t("confirm"),
    cancelButtonText: t("cancel"),
    type: "warning",
  })
    .then(() => {
      deleteBartenderApi(data.id).then(() => {
        loadBartenderList();
        ElMessage.success(t("deleteSuccess"));
      });
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
.el-tag {
  margin-right: 5px;
  &:last-child {
    margin-right: 0;
  }
}
</style>
